<template>
<div class="model-bg">
	<div class="model-box">
		<group >
		<x-input 
		  type="text" 
		  v-model="idCardNum" 
		  placeholder="请输入身份证号" 
		  title="身份证号:" keyboard="number"  v-if='!step' >
		</x-input>
		<x-input 
		  type="text" 
		  v-model="realName" 
		  placeholder="请输入真实名字" 
		  title="真实名字:" is-type="china-name"  v-if='step' >
		</x-input>
		<x-button type="default"  @click.native='sendContent'>确定</x-button>
		</group >
	</div>
</div>
</template>
<script>
	import {XInput, Group, XButton} from 'vux'

	export default {
		props:["step"],
		data(){
			return{
				idCardNum:'',
				realName:'',
			}
		},
		mounted() {
			this.$el.addEventListener('click',function(e){
				e.stopPropagation();
			})
		},
		methods:{
			sendContent(){
				if(this.step){
					if(this.realName!=''){
					this.$emit('colsecmodal',{ realName: this.realName })
					}else{
						this.$vux.toast.show({text:'请输入正确真实名字', time:1000,type:"warn"})
					}
				}else{
					if(this.idCardNum!=''&&/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.idCardNum)){
					this.$emit('colsecmodal', { idCardNum: this.idCardNum })
					}else{
						this.$vux.toast.show({text:'请输入正确身份证号', time:1000,type:"warn"})
					}
				}
				
			}
		},
		components: {
		    XInput,
		    XButton,
		    Group
		  }
	}
</script>
<style>
	.model-bg{width:100%;background:rgba(12, 12, 12, 0.6);height:100%;position:absolute;top:0;left:0;}
	.model-box{
		width:80%;
		position:absolute;top:50%;left:0;right:0;
		margin:0 auto;
		transform: translateY(-50%);
	}
</style>